@import '../../style/_variables.less';

.mooli-button.mooli-bbutton {
  padding: 0 16px;
  height: 44px;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  color: #131313;
  border-radius: 100px;

  .mooli-loading {
    color: #131313;
  }

  &--yellow {
    background-color: #FFD400;
    border: 1px solid #FFD400;

    &:active {
      background-color: #D9AD00;
      border: 1px solid #D9AD00;
    }
  }

  &--green {
    background-color: #0EBE5A;
    border: 1px solid #0EBE5A;
    color: #fff;

    &:active {
      background-color: #039949;
      border: 1px solid #039949;
    }

    .mooli-loading {
      color: #fff;
    }
  }

  &--orange {
    border: 1px solid #FA8C16;
    color: #FA8C16;

    &:active {
      background-color: #FFF7E6;
      ;
    }

    .mooli-loading {
      color: #FA8C16;
    }
  }

  &--white {
    border: 1px solid #D1D1D1;

    &:active {
      background-color: #F7F7F7;
      ;
    }
  }

  &--black {
    background-color: #131313;
    border: 1px solid #131313;
    color: #fff;

    &:active {
      color: #D1D1D1;
    }

    .mooli-loading {
      color: #fff;
    }
  }

  &--large {
    min-width: 156px;
    height: 44px;
  }

  &--normal {
    min-width: 80px;
    height: 36px;
    font-size: 14px;
  }

  &--small {
    min-width: 50px;
    height: 28px;
    font-size: 12px;
  }

  &--square {
    border-radius: 0px;
  }

  &--block {
    display: block;
    width: 100%;
  }

  &--disabled {
    background: #E3E3E3;
    border: 1px solid #E3E3E3;
    color: #fff;
    cursor: not-allowed;

    &:active {
      background: #E3E3E3;
      border: 1px solid #E3E3E3;
      color: #fff;
    }
  }

  &--orange&--disabled,
  &--white&--disabled {
    background: #fff;
    border: 1px solid #E3E3E3;
    color: #E3E3E3;
    cursor: not-allowed;

    &:active {
      background: #fff;
      border: 1px solid #E3E3E3;
      color: #E3E3E3;
    }
  }
}